<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态添加Item</title>
    <link rel="stylesheet" href="page.css">

</head>

<body>

    <table>
        <!-- 顶部按钮区域 -->
        <div class="buttons-div">
            <button class="add-button" onclick="addButtonClick()">新增</button>
            <button class="modify-button" onclick="modifyButtonClick()">修改</button>
            <button class="delete-button" onclick="deleteButtonClick()">删除</button>
        </div>

        <!-- 表头区域 -->
        <thead style="background-color: aqua;">
            <td><input type="checkbox" onclick="selectAllButtonClick()"></th>
            <td>角色编号</td>
            <td>角色名称</td>
            <td>权限字符</td>
            <td>显示顺序</td>
            <td>创建时间</td>
            <td>操作</td>
        </thead>
        <tbody>

        </tbody>
    </table>

    <!-- 查看详情页 -->
    <div id="detailPage" class="detail-page">
        <div class="close-button" onclick="hideDetailPage()">+</div>
        <div class="detail-page-content">
            <div>角色名称：</div><input id="roleNameInput" class="input-content" type="text">
            <div>权限字符：</div><input id="permissionDesInput" class="input-content" type="text">
            <div>创建时间：</div><input id="createTimeInput" class="input-content" type="text">
        </div>
        <button id="sure-button" class="sure-button" onclick="sureButtonClick(this)">确定</button>
    </div>

    <script src="./user_item.js"></script>
    <script src="./page.js"></script>
</body>

</html>